//自定义模版
Vue.component('myheader',{
    props:["category_arr","isLogin","wd"],//配置自定义模板中用到的变量
    template:`
 <header class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="Brand" src="images/logo.png">
        </a>
      </div>
      <!--首页及分类-->
      <ul class="nav navbar-nav">
        <li><a href="home.html">首页</a></li>
        <li v-for="c in category_arr">
          <a :href="'home.html?cid='+c.id" v-text="c.name">手绘</a>
        </li>
        <li>
          <form action="">
            <input type="text" placeholder="Search" v-model="wd">
            <button type="submit">
              <a class="fa fa-search" :href="'home.html?wd='+wd"></a>
            </button>
          </form>
        </li>
      </ul>
      <!--右侧列表内容-->
      <ul class="nav navbar-nav navbar-right">
        <li v-if="!isLogin"><a href="login.html" class="fa fa-user-circle-o">管理员入口</a></li>
        <li v-if="isLogin">
          <a href="send.html" class="fa fa-user-circle-o">发布作品</a>
        </li>
        <li v-if="isLogin">
          <a href="banner.html" class="fa fa-user-circle-o">轮播图</a>
        </li>
        <li v-if="isLogin">
          <a href="/logout" class="fa fa-user-circle-o">退出登录</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--v-if语句里面写一个条件, 条件满足则元素显示,不满足则不显示-->
  <!--<h3 v-if="!isLogin"  style="color: white">没有登录</h3>
  <h3 v-if="isLogin" style="color: white">已经登录</h3>-->

</header>
  `
})
//创建和header相关的vue对象
let header_vm = new Vue({
    el:"myheader",
    data:{
        category_arr:[],isLogin:false,wd:""
    },
    created:function () {
        //获取列表数据
        axios.get("/categorylist").then(function (response) {
            header_vm.category_arr = response.data;
        }).catch(function (err) {
            alert(err);
        })
        //检查用户是否登录过
        axios.get("/checklogin").then(function (response) {
            header_vm.isLogin = response.data;
        }).catch(function (err) {
            alert(err);
        })
    },
    methods:{
        logout:function () {
            //发出退出登录请求
            axios.get("/logout").then(function (response) {
                location.reload();//刷新页面
            }).catch(function (err) {
                alert(err);
            })
        }
    }
})